<template>
  <div class="kbase">
    <a-row type="flex" justify="space-between" :gutter="[12, 13]">
      <a-col :xl="17" :lg="24" :md="24" :sm="24" :xs="24">
        <a-row type="flex" justify="space-between" :gutter="[12, 13]">
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card :bordered="false" style="border-radius:8px;" :bodyStyle="{padding:'13px 26px 23px 22px'}">
              <div class="card_title flex row_bet" style="margin-bottom: 20px">
                <span>等你来答</span>
                <span class="more" @click="goquestion(1)">更多</span>
              </div>
              <div class="knowbox">
                <div
                    v-for="(item, index) in knowList"
                    :key="index"
                >
                  <div class="flex row_bet kli " style="margin-bottom: 3px" @click="godetails(item)">
                    <div class="knowtitle line-1" :title="item.q">{{ item.q }}</div>
                    <div class="user line-1">
                      <a-space>
                        <span class="line-1">{{ item.q_user }}</span>
                        <span class="line-1">{{ item.q_time }}  提问</span>
                      </a-space>
                    </div>
                    <div style="color: #96989B;flex: 1;text-align: right" class="line-1">
                      <span class="knowdate line-1" style="margin-right: 5px;">{{ item.view_num }}浏览</span>
                      <span class="knowinfo line-1">{{ item.a_num }}回答</span>
                    </div>
                  </div>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :xl="13" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card :bordered="false" style="border-radius:8px;" :bodyStyle="{padding:'13px 26px 23px 22px'}">
              <div class="card_title flex row_bet" style="margin-bottom: 20px">
                <span>我提问的</span>
                <span class="more" @click="goquestion(2)">更多</span>
              </div>
              <div class="knowbox">
                <div
                    v-for="(item, index) in knowList2"
                    :key="index"
                    class="flex row_bet kli "
                    style="margin-bottom: 3px">
                  <div class="line-1" :title="item.q" @click="godetails(item)">{{ item.q }}</div>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :xl="11" :lg="24" :md="24" :sm="24" :xs="24">
            <a-card :bordered="false" style="border-radius:8px;" :bodyStyle="{padding:'13px 26px 23px 22px'}">
              <div class="card_title flex row_bet" style="margin-bottom: 20px">
                <span>我回答的</span>
                <span class="more" @click="goquestion(3)">更多</span>
              </div>
              <div class="knowbox">
                <div
                    v-for="(item, index) in knowList3"
                    :key="index"
                    class="flex row_bet kli "
                    style="margin-bottom: 3px">
                  <div class="line-1" :title="item.q" @click="godetails(item)">{{ item.q }}</div>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
      <a-col :xl="7" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card :bordered="false" style="border-radius:8px;" :bodyStyle="{padding:'14px 20px 20px 22px'}">
          <div class="card_title" style="margin-bottom: 16px">影响力排行</div>
          <div>
            <div class="top">
              <div class="header">
                <img :src="require('@/assets/imgs/know1.png')" alt="">
                <div class="title">优秀答主</div>
              </div>
              <div class="theme">
                <ul class="list">
                  <li :key="index" v-for="(item, index) in answer">
                    <div class="flex row_bet col_center" style="width:100%">
                      <div class="flex row_left">
                        <a-avatar :src="item.img" :size="50"/>
                        <div style="margin-left: 13px;">
                          <div style="line-height: 25px">{{ item.user }}</div>
                          <div style="line-height: 25px">回答数：{{ item.count }}</div>
                        </div>
                      </div>
                      <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="top">
              <div class="header">
                <img :src="require('@/assets/imgs/know2.png')" alt="">
                <div class="title">学习达人</div>
              </div>
              <div class="theme">
                <ul class="list">
                  <li :key="index" v-for="(item, index) in read">
                    <div class="flex row_bet col_center" style="width:100%">
                      <div class="flex row_left">
                        <a-avatar :src="item.img" :size="50"/>
                        <div style="margin-left: 13px;">
                          <div style="line-height: 25px">{{ item.user }}</div>
                          <div style="line-height: 25px">浏览数：{{ item.count }}</div>
                        </div>
                      </div>
                      <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="top">
              <div class="header">
                <img :src="require('@/assets/imgs/know3.png')" alt="">
                <div class="title">好奇宝宝</div>
              </div>
              <div class="theme">
                <ul class="list">
                  <li :key="index" v-for="(item, index) in ask_info">
                    <div class="flex row_bet col_center" style="width:100%">
                      <div class="flex row_left">
                        <a-avatar :src="item.img" :size="50"/>
                        <div style="margin-left: 13px;">
                          <div style="line-height: 25px">{{ item.user }}</div>
                          <div style="line-height: 25px">提问数：{{ item.count }}</div>
                        </div>
                      </div>
                      <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
  import { getinfluencedata, getProblemList } from '@/api/knowledgeApi'

  export default {
    name: 'Kbase',
    data () {
      return {
        knowList: [
          // {
          //   a_num: 60,
          //   id: 156,
          //   q: '分享一下你给客服沟通的第一句话术是啥',
          //   q_time: '2019-10-25 12:35:59',
          //   q_user: '刘素真',
          //   view_num: 1129
          // },
        ],
        knowList2: [],
        knowList3: [],
        answer: [
          // {
          //   user: '陈柯帆',
          //   img: 'http://img.haodanku.com/headimg_15775_1591955585.jpg',
          //   count: 4
          // }
        ],
        read: [],
        ask_info: []
      }
    },
    created () {
      this.getProblemList(1, 15, 1)
      this.getProblemList(1, 15, 2)
      this.getProblemList(1, 15, 3)
      this.getinfluencedata()
    },
    mounted () {

    },
    methods: {
      godetails (row) {
        this.$store.dispatch('setRowsname', row)
        this.$router.push({
          path: '/knowledgecase/index/questionDetails'
        })
      },
      getinfluencedata () {
        getinfluencedata().then(res => {
          console.log(res)
          if (res.code === 200) {
            this.answer = res.data.answer
            this.read = res.data.read
            this.ask_info = res.data.ask_info
          }
        }).catch(err => {
          console.log(err)
        })
      },
      goquestion (val) {
        this.$router.push({
          path: '/knowledgecase/index/questionList',
          query: {
            type: val
          }
        })
      },
      getProblemList (page, pagesize, type, sort) {
        getProblemList({
          page: page,
          pagesize: pagesize,
          type: type,
          sort: sort
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            switch (type) {
              case 1:
                this.knowList = res.data.data
                break
              case 2:
                this.knowList2 = res.data.data
                break
              case 3:
                this.knowList3 = res.data.data
                break
            }
          }
        }).catch(err => {
          console.log(err)
        })
      }

    }
  }
</script>
<style lang='less' scoped>
  .kbase {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      margin-bottom: 15px;
      font-weight: 600;

      .more {
        color: #96989B;
        font-size: 14px;
        font-weight: 100;
        cursor: pointer
      }
    }

    .knowbox {
      .kli {
        cursor: pointer;

        .knowtitle {
          width: 50%;
        }

        .user {
          width: 30%;
          color: #96989B;
        }
      }
    }

    .top {
      margin-bottom: 20px;

      .header {
        width: 346px;
        height: 70px;
        margin: 0 auto;
        position: relative;

        img {
          width: 346px;
          height: 70px;
          position: absolute;
          top: 0;
          left: 0;
        }

        .title {
          width: 346px;
          height: 70px;
          line-height: 70px;
          display: flex;
          justify-content: center;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          font-size: 20px;
          color: white;
          /*font-weight: bold;*/
        }
      }

      .theme {
        margin: 0 auto;
        width: 346px;
        overflow: hidden;

        .list {
          width: 354px;
          /*margin: 16px 0 0;*/
          /*padding: 0;*/
          list-style: none;
          max-height: 183px;
          overflow-y: auto;
          /*font-family: initial;*/
          border: 1px solid rgba(240, 241, 244, 100);
          border-radius: 0px 0px 8px 8px;

          li {
            /*margin-top: 14px;*/
            height: 82px;
            line-height: 82px;
            padding: 15px 21px 17px 12px;
            border-bottom: 1px solid rgba(240, 241, 244, 100);

            /*div {*/
            /*  display: flex;*/
            /*  justify-content: space-between;*/
            /*  align-items: center;*/
            /*}*/

            span {
              color: rgba(0, 0, 0, 0.65);
              font-size: 14px;
              line-height: 22px;

              &:last-child {
                background-color: #f5f5f5;
                border-radius: 20px;
                display: inline-block;
                font-size: 12px;
                font-weight: 600;
                margin-right: 24px;
                height: 20px;
                line-height: 20px;
                width: 20px;
                text-align: center;
                float: right;
              }

              &.active {
                background-color: #314659;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
</style>
